<template>
  <div>
    <el-row style="height: 300px;" :gutter="20">
      <el-col :span="12" style="height: 300px;">
        <div id="leftecharts1" style="height: 300px;width: 690px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="rightecharts2" style="height: 300px;width: 690px;"></div>
      </el-col>
    </el-row>

    <el-row class="time">
      <el-col class="source">时间范围:
        <span @click="getWarringdata('today')">今天</span>
        <span @click="getWarringdata('yesterday')">昨天</span>
        <span @click="getWarringdata('week')">最近7天</span>
      </el-col>
    </el-row>

    <el-row>
      <el-col class="source">告警来源:
        <span @click="getWarringdata('')">全部</span>
        <span @click="getWarringdata(self)">{{self}}</span>
        <span @click="getWarringdata(analysis)">{{analysis}}</span>
      </el-col>
      <el-col>
        <cs-table :table-data="currentTableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  @handleSortChange="handleSortChange"
                  @handleSelectionChange="handleSelectionChange"
                  :table-option="tableOption"
                  :isSelection="false"
                  class="table tableHeight">
        </cs-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { allAssetDetail, allAssetDetailBar, allAssetDetailPie } from '@/api/alarm/all.js'
import echarts from 'echarts'
import CsTable from '@/components/cs-table'
export default {
  data() {
    return {
      self: '自身监控',
      analysis: '关联分析',
      currentTableData: [],
      tableLabel: [
        { label: '告警来源', param: 'source', align: 'center', sortable: true, isShow: true },
        { label: '告警名称', param: 'name', align: 'center', isShow: true },
        { label: '产生时间', param: 'createTime', align: 'center', sortable: false, isShow: true },
        { label: '严重程度', param: 'severity', align: 'center', sortable: false, isShow: true },
        { label: '处理状态', param: 'status', align: 'center', sortable: false, isShow: true }
      ],
      tableOption: {},
      pageNo: 1,
      pageSize: 10,
      total: 0,
      source: '',
      dateRange: '',
      // 左边折线图
      optionWarmingLeft: {
        title: {
          text: '最近7天告警趋势',
          textStyle: {
            fontSize: 12,
            color: '#878787'
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '2%',
          right: '6%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: 14
            },
            formatter: function(value) {
              // debugger
              var ret = '' // 拼接加\n返回的类目项
              var maxLength = 10 // 每项显示文字个数
              var valLength = value.length // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) { // 如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * maxLength // 开始截取的位置
                  var end = start + maxLength // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
            }
          },
          axisLine: {
            lineStyle: {
              color: '#0a2b52',
              width: 0.5 // 这里是为了突出显示加上的
            }
          }
        }],
        yAxis: [{
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#8398DE',
              width: 1 // 这里是为了突出显示加上的
            }
          },
          axisLabel: {
            formatter: function(val) {
              return val + ''
            },
            show: true,
            textStyle: {
              color: '#333', // 字体颜色
              fontSize: 14
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        }],
        series: [{
          name: '告警',
          type: 'line',
          smooth: true,
          // symbol: "none", // 去掉折线点
          stack: 100,
          itemStyle: {
            normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,150,239,0.9)' // 0% 处的颜色
              }, {
                offset: 0.5,
                color: 'rgba(0,150,239,0.5)' // 100% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(53,142,215, 0.3)' // 100% 处的颜色
              }]), // 背景渐变色
              lineStyle: { // 系列级个性化折线样式
                width: 2,
                type: 'solid',
                color: '#35b1fe'
              }
            },
            emphasis: {
              color: '#35b1fe',
              lineStyle: { // 系列级个性化折线样式
                width: 0.5,
                type: 'dotted',
                color: '#35b1fe' // 折线的颜色
              }
            }
          }, // 线条样式
          symbolSize: 9, // 折线点的大小
          areaStyle: {
            normal: {}
          },
          data: []
        }]
      },
      // 饼图数据
      optionWarmingight: {
        title: {
          text: '最近7天告警来源统计',
          textStyle: {
            fontSize: 12,
            color: '#878787'
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          top: '20',
          left: '-5%',
          right: '-3%',
          bottom: '-9%'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  props: {
    assetName: {
      type: String
    }
  },
  components: {
    CsTable
  },
  created() {
    this.getWarringdata()
  },
  mounted() {
    this.leftEcharts()
    this.rightEcharts()
  },
  methods: {
    leftEcharts() {
      const data = {
        assetName: this.assetName
      }
      allAssetDetailBar(data).then((res) => {
        this.optionWarmingLeft.xAxis[0].data = res.data.reverse().map(item => {
          return item.name
        })
        this.optionWarmingLeft.series[0].data = res.data.map(item => {
          return item.value
        })
      })
      setTimeout(() => {
        var myChart1 = echarts.init(document.getElementById('leftecharts1'))
        myChart1.setOption(this.optionWarmingLeft)
      }, 500)
    },
    rightEcharts() {
      const data = {
        assetName: this.assetName
      }
      allAssetDetailPie(data).then((res) => {
        if (res.data.length === 0) {
          const data = [
            { value: 1, name: '无数据' }
          ]
          this.optionWarmingight.series[0].data = data
        } else {
          this.optionWarmingight.series[0].data = res.data
        }
      })
      setTimeout(() => {
        var myChart2 = echarts.init(document.getElementById('rightecharts2'))
        myChart2.setOption(this.optionWarmingight)
      }, 500)
    },
    // 详情的接口调用
    getdata(data) {
      allAssetDetail(data).then((res) => {
        this.currentTableData = res.data.rows
        this.total = res.data.totalRows
      })
    },
    // 详情里面的告警部分表格数据
    getWarringdata(value) {
      if (value === 'today') {
        this.dateRange = value
      } else if (value === 'yesterday') {
        this.dateRange = value
      } else if (value === 'week') {
        this.dateRange = value
      } else if (value === this.self) {
        this.source = value
      } else if (value === this.analysis) {
        this.source = value
      } else if (value === '') {
        this.source = value
      }
      const data = {
        source: this.source,
        dateRange: this.dateRange,
        assetName: this.assetName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.getdata(data)
    },
    handleButton() {
    },
    handleSortChange() {
    },
    handleSelectionChange() {
    },
    // 分页监听
    handleSizeChange(newSize) {
      this.pageSize = newSize
      const data = {
        source: this.source,
        dateRange: this.dateRange,
        assetName: this.assetName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.getdata(data)
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
      const data = {
        source: this.source,
        dateRange: this.dateRange,
        assetName: this.assetName,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.getdata(data)
    }
  }
}
</script>

<style scoped>
  .table {
    margin: 10px 0;
    max-height: 400px !important;
  }
  .time {
    margin: 10px 0;
  }
  .source span {
    cursor: pointer;
    margin-left: 15px;
  }
  .source span:hover {
    text-decoration: underline;
  }
</style>
